<div class="modal-header">
  <h4 class="modal-title">
    <i class="bi bi-box-seam me-2"></i>
    录入进货通知
  </h4>
  <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
</div>
<div class="modal-body">
  <form #form="ngForm" (ngSubmit)="save()">
    <!-- Row 1 -->
    <div class="row">
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-person me-1"></i>
          货主 *
        </label>
        <select class="form-select" name="shipper" [(ngModel)]="customerGood.shipper" required>
          <option [ngValue]="null">--请选择--</option>
          <option *ngFor="let shipper of shippers$ | async" [value]="shipper.id">{{ shipper.name }}</option>
        </select>
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-calendar-event me-1"></i>
          预计到货时间
        </label>
        <input type="datetime-local" class="form-control" name="estimatedArrivalTime" [(ngModel)]="customerGood.estimatedArrivalTime">
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-receipt me-1"></i>
          客户订单号
        </label>
        <input type="text" class="form-control" name="customerOrderNo" [(ngModel)]="customerGood.customerOrderNo" placeholder="请输入客户订单号">
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-truck me-1"></i>
          运输号码
        </label>
        <input type="text" class="form-control" name="transportNo" [(ngModel)]="customerGood.transportNo" placeholder="请输入运输号码">
      </div>
    </div>
    <!-- Row 2 -->
    <div class="row">
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-building me-1"></i>
          运输公司
        </label>
        <input type="text" class="form-control" name="transportCompany" [(ngModel)]="customerGood.transportCompany" placeholder="请输入运输公司">
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-shop me-1"></i>
          供应商
        </label>
        <input type="text" class="form-control" name="supplier" [(ngModel)]="customerGood.supplier" placeholder="请输入供应商">
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-upc-scan me-1"></i>
          供应商编码
        </label>
        <input type="text" class="form-control" name="supplierCode" [(ngModel)]="customerGood.supplierCode" placeholder="请输入供应商编码">
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-grid me-1"></i>
          预约库区
        </label>
        <select class="form-select" name="reservedWarehouseArea" [(ngModel)]="customerGood.reservedWarehouseArea">
          <option [ngValue]="null">--请选择--</option>
          <option *ngFor="let area of reservedWarehouseAreas$ | async" [ngValue]="area.id">{{ area.name }}</option>
        </select>
      </div>
    </div>
    <!-- Row 3 -->
    <div class="row">
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-box me-1"></i>
          仓库
        </label>
        <select class="form-select" name="warehouse" [(ngModel)]="customerGood.warehouse">
          <option [ngValue]="null">--请选择--</option>
          <option *ngFor="let warehouse of warehouses$ | async" [ngValue]="warehouse.id">{{ warehouse.name }}</option>
        </select>
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-tags me-1"></i>
          订单类型
        </label>
        <select class="form-select" name="orderType" [(ngModel)]="customerGood.orderType">
          <option [ngValue]="null">--请选择--</option>
          <option *ngFor="let type of orderTypes$ | async" [ngValue]="type.id">{{ type.name }}</option>
        </select>
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-chat-text me-1"></i>
          备注
        </label>
        <input type="text" class="form-control" name="remarks" [(ngModel)]="customerGood.remarks" placeholder="请输入备注信息">
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-paperclip me-1"></i>
          附件
        </label>
        <div class="file-upload">
          <button type="button" class="btn btn-secondary" (click)="fileInput.click()" [disabled]="!!customerGood.attachmentPath">
            <i class="bi bi-upload me-1"></i>
            选择文件
          </button>
          <input type="file" #fileInput style="display: none" (change)="onFileSelected($event)" accept=".png,.jpg,.jpeg,.pdf,.doc,.docx">
          <input type="hidden" name="attachmentPath" [(ngModel)]="customerGood.attachmentPath">
          <div *ngIf="customerGood.attachmentPath" class="file-info">
            <span class="text-truncate" [title]="customerGood.attachmentPath">{{ customerGood.attachmentPath }}</span>
            <button type="button" class="btn-close" aria-label="清除文件" (click)="clearAttachment()"></button>
          </div>
        </div>
      </div>
    </div>
    <!-- Row 4 -->
    <div class="row">
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-truck-flatbed me-1"></i>
          车号
        </label>
        <input type="text" class="form-control" name="carNo" [(ngModel)]="customerGood.carNo" placeholder="请输入车号">
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-person-badge me-1"></i>
          司机
        </label>
        <input type="text" class="form-control" name="driverName" [(ngModel)]="customerGood.driverName" placeholder="请输入司机姓名">
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-telephone me-1"></i>
          司机电话
        </label>
        <input type="text" class="form-control" name="driverPhone" [(ngModel)]="customerGood.driverPhone" placeholder="请输入司机电话">
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label">
          <i class="bi bi-file-text me-1"></i>
          进货通知单号
        </label>
        <input type="text" class="form-control" name="purchaseOrderNo" [(ngModel)]="customerGood.purchaseOrderNo" placeholder="请输入进货通知单号">
      </div>
    </div>

    <!-- Section: 进货通知明细 -->
    <h6 class="mt-4">
      <i class="bi bi-list-check me-2"></i>
      进货通知明细
    </h6>
    <hr>
    <div class="d-flex justify-content-start mb-3 gap-2">
      <button type="button" class="btn btn-info" (click)="addRow()">
        <i class="bi bi-plus-lg me-1"></i>
        添加
      </button>
      <button type="button" class="btn btn-secondary" (click)="batchAdd()">
        <i class="bi bi-calculator me-1"></i>
        合计
      </button>
    </div>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>序号</th>
            <th>操作</th>
            <th>商品编码</th>
            <th>数量</th>
            <th>计划占用储位数</th>
            <th>收货完成</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of goodCodeItems; let i = index">
            <td class="text-center">{{ i + 1 }}</td>
            <td>
              <button type="button" class="btn btn-sm btn-danger" (click)="removeRow(i)">
                <i class="bi bi-trash me-1"></i>
                删除
              </button>
            </td>
            <td>
              <div class="input-group">
                <input type="text" class="form-control" [(ngModel)]="item.productCode" [name]="'productCode' + i" (click)="openGoodsDialog(i)" readonly>
                <button class="btn btn-outline-secondary" type="button" (click)="openGoodsDialog(i)">
                  <i class="bi bi-search"></i>
                </button>
              </div>
            </td>
            <td>
              <input type="number" class="form-control" [(ngModel)]="item.quantity" [name]="'quantity' + i" min="0">
            </td>
            <td>
              <input type="number" class="form-control" [(ngModel)]="item.plannedStorageSlots" [name]="'slots' + i" min="0">
            </td>
            <td>
              <div class="btn-group" role="group">
                <input type="radio" class="btn-check" [name]="'status' + i" [id]="'yes' + i" [value]="'Yes'" [(ngModel)]="item.status">
                <label class="btn btn-outline-success" [for]="'yes' + i">是</label>

                <input type="radio" class="btn-check" [name]="'status' + i" [id]="'no' + i" [value]="'No'" [(ngModel)]="item.status">
                <label class="btn btn-outline-danger" [for]="'no' + i">否</label>

                <input type="radio" class="btn-check" [name]="'status' + i" [id]="'initial' + i" [value]="'Initial'" [(ngModel)]="item.status">
                <label class="btn btn-outline-secondary" [for]="'initial' + i">初始</label>
              </div>
            </td>
          </tr>
          <tr *ngIf="goodCodeItems.length === 0">
            <td colspan="6" class="text-center text-muted py-4">
              <i class="bi bi-inbox fs-2 d-block mb-2"></i>
              暂无数据，请点击"添加"按钮新增明细
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="modal.dismiss()">
    <i class="bi bi-x-lg me-1"></i>
    取消
  </button>
  <button type="button" class="btn btn-primary" (click)="save()">
    <i class="bi bi-check-lg me-1"></i>
    保存
  </button>
</div> 